import { defineDirective } from "@/shared/tools.mjs";

// directive的ctrl 将与 view的ctrl 结合: 因为id相同
export const mzModalToggle = defineDirective(
  /**
   * @param {ng.ui.bootstrap.IModalService} $uibModal
   * @returns {ng.IDirective}
   */
  ($uibModal) => {
    const surrogate$uibModal = $uibModal;
    return {
      restrict: "A",
      // require: {
      //   click: "^ngClick",
      // },
      controller: class {
        /**
         * @type {ng.ui.bootstrap.IModalSettings}
         */
        mzModalConfig = {
          controller: class {
            static $inject = ["$scope", "$uibModalInstance"];

            /**
             * @param {ng.IScope} $scope
             * @param {ng.ui.bootstrap.IModalInstanceService} $uibModalInstance
             */
            constructor($scope, $uibModalInstance) {
              this.$scope = $scope;
              this.$uibModalInstance = $uibModalInstance;
            }

            /**
             * @type {VoidFunction}
             */
            ok = () => {
              this.$uibModalInstance.close({ $value: "ok" });
            };

            /**
             * @type {VoidFunction}
             */
            cancel = () => {
              this.$uibModalInstance.dismiss({ $value: "cancel" });
            };

            handleClick() {
              console.log("mzModalToggle", this.$scope);
            }
          },
          controllerAs: "$mzModalCallee",
          template: /* HTML */ html`
            <mz-modal-component
              mz-title="'Modal title'"
              mz-on-ok="$mzModalCallee.handleClick()"
              mz-on-cancel="$mzModalCallee.handleClick()"
            >
              <mz-modal-component-title>
                <span>Modal title</span>
              </mz-modal-component-title>
              <mz-modal-component-body>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Curabitur blandit tempus porttitor.
                </p>
              </mz-modal-component-body>
              <mz-modal-component-footer>
                <button ng-click="$mzModalCallee.ok()">OK</button>
              </mz-modal-component-footer>
            </mz-modal-component>
            <div>${DebugButtonHTML("$mzModalCallee")}</div>
          `,
          appendTo: $("[mz-modal-entry]").length
            ? $("[mz-modal-entry]")
            : $("body"),
          animation: true,
          size: "md",
        };

        /**
         * @param {ng.IScope} $scope
         */
        constructor($scope) {
          this.$scope = $scope;
          this.$uibModal = surrogate$uibModal;
        }

        open() {
          // this.modalSetting = opt;
          const modal = this.$uibModal.open(this.mzModalConfig);
          modal.result.then(
            /**
             * @param {{$value: {toString(): string}}} result
             */
            (result) => {
              console.log("modal.result", result.$value);
            },
            /**
             * @param {{$value: {toString(): string}}} reason
             * @returns {void}
             */
            // eslint-disable-next-line unicorn/catch-error-name
            (reason) => {
              console.log("modal.reason", reason.$value);
            },
          );
        }

        handleClick() {
          console.log("mzModalToggle", this.$scope);
        }

        static $inject = ["$scope"];
      },
      transclude: true,
      controllerAs: "$mzModal",
      template: /* HTML */ html`
        <div class="modal-toggle" ng-click="$mzModal.open()">
          <ng-transclude></ng-transclude>
        </div>
        <div $mzModal>${DebugButtonHTML("$mzModal")}</div>
      `,
    };
  },
  ["$uibModal"],
);
// pre
export const mzModalDirective = defineDirective(() => ({
  restrict: "E",
  scope: {
    // prop
    mzTitle: `@${camelCase("mz-title")}`,
    // method
    mzOnCancel: `&${camelCase("mz-on-cancel")}`,
    mzOnOk: `&${camelCase("mz-on-ok")}`,
    // Ctrl
    ok: "&",
    cancel: "&",
    handleClick: "&",
  },
  controller: class {
    static $inject = ["$scope"];

    /**
     * @param {ng.IScope & {mzTitle: string; mzOnCancel: VoidFunction; mzOnOk: VoidFunction;}} $scope
     */
    constructor($scope) {
      this.$scope = $scope;
    }

    ok = () => {
      this.$scope.mzOnOk();
    };

    cancel = () => {
      this.$scope.mzOnCancel();
    };

    /**
     * @type {VoidFunction}
     */
    handleClick = () => {
      console.log("mzModalDirective", this.$scope);
    };
  },
  controllerAs: "$mzModalDirective",
  transclude: {
    title: `?${camelCase("mz-modal-component-title")}`,
    body: camelCase("mz-modal-component-body"),
    footer: `?${camelCase("mz-modal-component-footer")}`,
  },
  template: /* HTML */ html`
    <ng-transclude ng-transclude-slot="title">
      <button ng-click="$mzModalDirective.cancel()">X</button>
    </ng-transclude>
    <hr ng-if="title" />

    <ng-transclude
      ng-transclude-slot="body"
      ng-bind-html="body"
    ></ng-transclude>

    <hr ng-if="footer" />
    <ng-transclude ng-transclude-slot="footer">
      <button ng-click="$mzModalDirective.ok()">OK</button>
    </ng-transclude>
    <div $mzModalDirective>${DebugButtonHTML("$mzModalDirective")}</div>
  `,
}));
